<template>
	<view class="panel">
		<slot name='header'>
			<view class="header" :class='[{"c-flag": flag}]' v-if='title'>
				{{title}}
			</view>
		</slot>
		<view class="c-box-shadow-light body" :style="[getPanelStyle]">
			<slot></slot>
		</view>
		<slot name="footer"></slot>
	</view>
</template>

<script>
	import ComponentMixin from "../../mixins/common-component-mixin.js";
	export default {
		mixins: [ComponentMixin],
		name: "c-panel",
		props: {
			flag: {
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: null
			},
			useHeader: {
				type: Boolean,
				default: false,
			},
			backgroundColor: {
				type: String,
				default: "#fff"
			}
		},
		data() {
			return {

			};
		},
		computed: {
			getPanelStyle: function() {
				return {
					backgroundColor: this.backgroundColor ? this.backgroundColor : "#fff"
				}
			},
		},
		methods: {}
	}
</script>

<style lang="scss" scoped>
	.panel {
		padding: 20rpx 40rpx;

		.header {
			display: flex;
			flex-direction: row;
			background: transparent;
			color: #333;
			font-size: 30rpx;
			font-weight: 700;
			margin-bottom: 20rpx;
		}

		.body {
			display: flex;
			flex-direction: column;
			border-radius: 20rpx;
		}

		.footer {
			display: flex;
			flex-direction: row;
			background: transparent;
		}
	}
</style>